<template>
    <div class="relative">
        <!-- 主内容区域 -->
        <div class="overflow-y-auto px-4 md:px-6 py-6 pb-32">
            <!-- 顶部搜索栏 -->
            <SearchBar v-model="searchKeyword" @search="onSearch" />

            <!-- 推荐歌单区域 -->
            <PlaylistGrid :playlists="recommendPlaylists" @select="loadPlaylist" />

            <!-- 歌曲列表区域 -->
            <SongTable
                :songs="musicStore.songList"
                :current-song-id="musicStore.currentSong?.id"
                :is-playing="musicStore.isPlaying"
                @play="musicStore.playSong"
            />
        </div>

        <!-- 底部播放器 -->
        <MusicPlayer
            :current-song="musicStore.currentSong"
            :is-playing="musicStore.isPlaying"
            :current-time="musicStore.currentTime"
            :total-duration="musicStore.totalDuration"
            :volume="musicStore.volume"
            :play-mode="musicStore.playMode"
            @toggle-play="musicStore.togglePlay"
            @previous="musicStore.previousSong"
            @next="musicStore.nextSong"
            @toggle-mode="musicStore.togglePlayMode"
            @toggle-drawer="togglePlaylistDrawer"
            @toggle-lyrics="toggleLyricsDrawer"
            @update:volume="musicStore.volume = $event"
            @seek="musicStore.seek"
        />

        <!-- 播放列表抽屉 -->
        <PlaylistDrawer
            v-model:open="playlistDrawerVisible"
            :songs="musicStore.songList"
            :current-song-id="musicStore.currentSong?.id"
            @play="musicStore.playSong"
        />

        <!-- 歌词抽屉 -->
        <LyricsDrawer v-model:open="lyricsDrawerVisible" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { SearchBar, PlaylistGrid, SongTable, MusicPlayer, PlaylistDrawer, LyricsDrawer } from './components'
import type { Playlist } from './components'
import { useMusicStore, type Song } from '@/stores'

const musicStore = useMusicStore()

// 搜索关键词
const searchKeyword = ref('')

// 推荐歌单
const recommendPlaylists = ref<Playlist[]>([
    {
        id: 1,
        name: '每日推荐',
        cover: 'https://picsum.photos/200/200?random=1',
        playCount: 1234567,
    },
    {
        id: 2,
        name: '华语热歌榜',
        cover: 'https://picsum.photos/200/200?random=2',
        playCount: 9876543,
    },
    {
        id: 3,
        name: '欧美经典',
        cover: 'https://picsum.photos/200/200?random=3',
        playCount: 3456789,
    },
    {
        id: 4,
        name: '轻音乐',
        cover: 'https://picsum.photos/200/200?random=4',
        playCount: 2345678,
    },
    {
        id: 5,
        name: '粤语精选',
        cover: 'https://picsum.photos/200/200?random=5',
        playCount: 4567890,
    },
    {
        id: 6,
        name: '摇滚传奇',
        cover: 'https://picsum.photos/200/200?random=6',
        playCount: 1987654,
    },
])

// 初始歌曲列表 - 使用真实的音频文件
const initialSongList: Song[] = [
    {
        id: 1,
        name: '晴天',
        artist: '周杰伦',
        album: '叶惠美',
        duration: 269,
        cover: 'https://picsum.photos/60/60?random=11',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
        lyrics: `[00:00.00]晴天 - 周杰伦
[00:03.50]词：周杰伦
[00:05.50]曲：周杰伦
[00:08.50]
[00:23.65]故事的小黄花
[00:26.32]从出生那年就飘着
[00:29.46]童年的荡秋千
[00:31.92]随记忆一直晃到现在
[00:35.39]Re So So Si Do Si La
[00:38.46]So La Si Si Si Si La Si La So
[00:41.68]吹着前奏望着天空
[00:44.17]我想起花瓣试着掉落
[00:47.54]为你翘课的那一天
[00:50.22]花落的那一天
[00:53.05]教室的那一间
[00:55.68]我怎么看不见
[00:58.51]消失的下雨天
[01:01.24]我好想再淋一遍
[01:04.37]没想到失去的勇气我还留着
[01:09.52]好想再问一遍
[01:12.50]你会等待还是离开
[01:16.08]刮风这天我试过握着你手
[01:21.53]但偏偏雨渐渐大到我看你不见
[01:27.56]还要多久我才能在你身边
[01:33.20]等到放晴的那天也许我会比较好一点
[01:38.88]从前从前有个人爱你很久
[01:44.71]但偏偏风渐渐把距离吹得好远
[01:50.65]好不容易又能再多爱一天
[01:56.30]但故事的最后你好像还是说了拜拜`,
    },
    {
        id: 2,
        name: '七里香',
        artist: '周杰伦',
        album: '七里香',
        duration: 300,
        cover: 'https://picsum.photos/60/60?random=12',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
        lyrics: `[00:00.00]七里香 - 周杰伦
[00:02.50]词：方文山
[00:04.50]曲：周杰伦
[00:07.50]
[00:32.15]窗外的麻雀 在电线杆上多嘴
[00:36.82]你说这一句 很有夏天的感觉
[00:41.52]手中的铅笔 在纸上来来回回
[00:46.15]我用几行字形容你是我的谁
[00:51.38]秋刀鱼的滋味 猫跟你都想了解
[00:56.11]初恋的香味就这样被我们寻回
[01:00.78]那温暖的阳光 像刚摘的鲜艳草莓
[01:05.74]你说你舍不得吃掉这一种感觉
[01:10.53]雨下整夜 我的爱溢出就像雨水
[01:15.33]院子落叶 跟我的思念厚厚一叠
[01:20.04]几句是非 也无法将我的热情冷却
[01:24.76]你出现在我诗的每一页
[01:29.56]雨下整夜 我的爱溢出就像雨水
[01:34.21]窗台蝴蝶 像诗里纷飞的美丽章节
[01:38.92]我接着写 把永远爱你写进诗的结尾
[01:43.68]你是我唯一想要的了解`,
    },
    {
        id: 3,
        name: '稻香',
        artist: '周杰伦',
        album: '魔杰座',
        duration: 223,
        cover: 'https://picsum.photos/60/60?random=13',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
        vip: true,
        lyrics: `[00:00.00]稻香 - 周杰伦
[00:01.50]词：周杰伦
[00:03.50]曲：周杰伦
[00:06.50]
[00:24.15]对这个世界如果你有太多的抱怨
[00:27.82]跌倒了就不敢继续往前走
[00:31.23]为什么人要这么的脆弱堕落
[00:34.94]请你打开电视看看
[00:37.24]多少人为生命在努力勇敢的走下去
[00:41.06]我们是不是该知足
[00:44.07]珍惜一切就算没有拥有
[00:47.58]还记得你说家是唯一的城堡
[00:51.18]随着稻香河流继续奔跑
[00:54.61]微微笑小时候的梦我知道
[00:58.34]不要哭让萤火虫带着你逃跑
[01:01.94]乡间的歌谣永远的依靠
[01:05.42]回家吧回到最初的美好
[01:09.05]不要这么容易就想放弃
[01:12.27]就像我说的
[01:13.87]追不到的梦想换个梦不就得了
[01:16.47]为自己的人生鲜艳上色
[01:18.87]先把爱涂上喜欢的颜色`,
    },
    {
        id: 4,
        name: '告白气球',
        artist: '周杰伦',
        album: '周杰伦的床边故事',
        duration: 206,
        cover: 'https://picsum.photos/60/60?random=14',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3',
        lyrics: `[00:00.00]告白气球 - 周杰伦
[00:02.50]词：方文山
[00:04.50]曲：周杰伦
[00:07.50]
[00:18.87]塞纳河畔 左岸的咖啡
[00:22.46]我手一杯 品尝你的美
[00:26.32]留下唇印的嘴
[00:29.78]花店玫瑰 名字写错谁
[00:33.51]告白气球 风吹到对街
[00:37.24]微笑在天上飞
[00:40.77]你说你有点难追
[00:43.11]想让我知难而退
[00:44.83]礼物不需挑最贵
[00:46.67]只要香榭的落叶
[00:48.51]喔～营造浪漫的约会
[00:50.81]不害怕搞砸一切
[00:52.57]拥有你就拥有全世界
[00:55.37]亲爱的 爱上你 从那天起
[00:59.12]甜蜜的很轻易
[01:02.85]亲爱的 别任性 你的眼睛
[01:06.56]在说我愿意`,
    },
    {
        id: 5,
        name: '夜曲',
        artist: '周杰伦',
        album: '十一月的萧邦',
        duration: 217,
        cover: 'https://picsum.photos/60/60?random=15',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3',
        lyrics: `[00:00.00]夜曲 - 周杰伦
[00:02.50]词：方文山
[00:04.50]曲：周杰伦
[00:07.50]
[00:41.24]一群嗜血的蚂蚁被腐肉所吸引
[00:44.73]我面无表情看孤独的风景
[00:48.22]失去你 爱恨开始分明
[00:51.80]失去你 还有什么事好关心
[00:55.66]当鸽子不再象征和平
[00:57.82]我终于被提醒
[00:59.44]广场上喂食的是秃鹰
[01:02.88]我用漂亮的押韵
[01:04.72]形容被掠夺一空的爱情
[01:07.18]乌云开始遮蔽 黑夜覆盖
[01:10.81]在为谁酝酿
[01:12.84]夜曲
[01:14.73]泛黄的春联还残留在墙上
[01:18.21]依稀可看见几个字 岁岁平安
[01:22.02]我用刀削平竹片
[01:23.89]想提笔该写些什么祭奠
[01:25.68]为你写的那些 夜曲`,
    },
    {
        id: 6,
        name: '简单爱',
        artist: '周杰伦',
        album: '范特西',
        duration: 270,
        cover: 'https://picsum.photos/60/60?random=16',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3',
        lyrics: `[00:00.00]简单爱 - 周杰伦
[00:02.50]词：徐若瑄
[00:04.50]曲：周杰伦
[00:07.50]
[00:15.63]说不上为什么 我变得很主动
[00:19.21]若爱上一个人 什么都会值得去做
[00:23.12]我想大声宣布 对你依依不舍
[00:26.89]连隔壁邻居都猜到我现在的感受
[00:30.63]河边的风 在吹着头发飘动
[00:34.42]牵着你的手 一阵莫名感动
[00:38.21]我想带你 回我的外婆家
[00:41.82]一起看着日落 一直到我们都睡着
[00:45.72]我想就这样牵着你的手不放开
[00:49.84]爱可不可以简简单单没有伤害
[00:53.45]你 靠着我的肩膀 你 在我胸口睡着
[00:57.20]像这样的生活 我爱你 你爱我
[01:01.05]想就这样牵着你的手不放开
[01:04.82]爱能不能够永远单纯没有悲哀
[01:08.56]你 靠着我的肩膀 你 在我胸口睡着
[01:12.31]像这样的生活 我爱你 你爱我`,
    },
    {
        id: 7,
        name: '星晴',
        artist: '周杰伦',
        album: 'Jay',
        duration: 275,
        cover: 'https://picsum.photos/60/60?random=17',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3',
        lyrics: `[00:00.00]星晴 - 周杰伦
[00:02.50]词：周杰伦
[00:04.50]曲：周杰伦
[00:07.50]
[00:32.56]我在这等着你回来
[00:36.23]等得我好无奈
[00:38.67]你怎么连招呼也不来
[00:41.23]说要分开就真的分开了吗
[00:47.83]我想哭 你想笑
[00:49.78]像世界末日已来到
[00:52.34]好像已不重要
[00:54.89]我想逃 偏无处可逃
[00:59.11]手机留言删不掉
[01:01.55]你的习惯 我都了
[01:04.23]眼泪掉了 这次我想要让你知道
[01:10.23]就算你不在我身旁
[01:12.89]我还是会不停想
[01:15.45]想你的笑 想你的外套
[01:18.11]想你白色袜子和你身上的味道
[01:23.34]我想念你的吻
[01:25.78]和手指淡淡烟草味道
[01:28.45]记忆中曾被爱的味道`,
    },
    {
        id: 8,
        name: '龙卷风',
        artist: '周杰伦',
        album: 'Jay',
        duration: 234,
        cover: 'https://picsum.photos/60/60?random=18',
        url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3',
        vip: true,
        lyrics: `[00:00.00]龙卷风 - 周杰伦
[00:02.50]词：徐若瑄
[00:04.50]曲：周杰伦
[00:07.50]
[00:25.76]爱像一阵风
[00:28.32]吹完它就走
[00:30.91]这样的节奏
[00:33.51]谁都无可奈何
[00:36.24]没有你以后
[00:38.81]我灵魂失控
[00:41.40]黑云在头顶停留
[00:45.37]爱一阵风
[00:47.95]吹完它就走
[00:50.53]这样的节奏
[00:53.11]谁都无可奈何
[00:55.81]没有你以后
[00:58.41]我灵魂失控
[01:00.98]黑云在头顶停留
[01:04.93]为你等待
[01:07.50]为你放弃我所拥有的所有
[01:12.63]自由
[01:14.55]无路可走 无处可走
[01:19.73]对你的爱 无法停留
[01:24.87]爱像龙卷风
[01:27.44]离不开暴风圈来不及逃`,
    },
]

// 播放列表抽屉显示状态
const playlistDrawerVisible = ref(false)

// 歌词抽屉显示状态
const lyricsDrawerVisible = ref(false)

// 搜索
const onSearch = (value: string) => {
    console.log('搜索:', value)
    message.info(`搜索: ${value}`)
}

// 加载歌单
const loadPlaylist = (playlist: Playlist) => {
    console.log('加载歌单:', playlist.name)
    message.success(`加载歌单: ${playlist.name}`)
}

// 切换播放列表抽屉
const togglePlaylistDrawer = () => {
    playlistDrawerVisible.value = !playlistDrawerVisible.value
}

// 切换歌词抽屉
const toggleLyricsDrawer = () => {
    lyricsDrawerVisible.value = !lyricsDrawerVisible.value
}

// 组件挂载时初始化歌曲列表到全局状态
onMounted(() => {
    if (musicStore.songList.length === 0) {
        musicStore.setSongList(initialSongList)
    }
})
</script>

<style scoped></style>
